<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" type="text/css" href="styles.css" />

        <script type="text/javascript" src="jquery1.7.min.js"></script>
        <script type="text/javascript" src="raphael-min.js"></script>
        <script type="text/javascript" src="dracula_graffle.js"></script>
        <script type="text/javascript" src="dracula_graph.js"></script>
        <script type="text/javascript" src="dracula_algorithms.js"></script>
        <script type="text/javascript" src="graph.js"></script>

        <script type="text/javascript" src="main.js"></script>

    </head>
    <body>
        <button id="gtb" onclick="showGraphTab();" style="background-color: #AEE6AC">graf</button>
        <button id="atb" onclick="showAlgorithmTab();" style="background-color: #A9EEDA">algorytm</button>
        <button id="amtb" onclick="showAlgorithmMakerTab();" style="background-color: #A9EEDA">tworzenie algorytmu</button>
        <div id="menu">
            <div id="graphTab">
                <div class='menuFirst'>
                    wybierz tryb modyfikacji grafu<br/>
                    <form id="modeSelect">
                        <label>
                            <input id="dragMode" type="radio" name="mode" value="drag" checked="checked" />
                            przeciąganie
                        </label><br/>
                        <label>
                            <input id="drawMode" type="radio" name="mode" value="draw" />
                            rysowanie
                        </label><br/>
                        <label>
                            <input id="deleteMode" type="radio" name="mode" value="delete" />
                            usuwanie
                        </label><br/>
                    </form>
                    <label>
                        <input id="nodeInput" type="checkbox" name="nodeInput" />
                        pytaj o id nowego wierzchołka
                    </label><br/>
                    <label>
                        <input id="edgeInput" type="checkbox" name="edgeInput" />
                        pytaj o wagę nowej krawędzi
                    </label><br/>
                    <br/>
                    <label>
                        <input id="directed" type="checkbox" name="directed" checked="checked"/>
                        krawędzie skierowane
                    </label>
                </div>
                <div class='menuSecond'>
                    lub wczytaj graf:<br/>
                    <select id="graphName" style="width: 200px">
                        <option value="g-1">prosty przepływ</option>
                        <option value="g-2">bfs i dfs</option>
                        <option value="g-3">graf 3</option>
                        <option value="g-4">pusty graf</option>
                    </select><br/>
                    <button id="graphLoader" class="grapher">wczytaj wybrany graf</button>
                    <button id="graphRemover" class="grapher">usuń wybrany graf</button><br/>
                    <br/>
                    <button id="graphSaver" class="grapher">zapisz aktualny graf</button>
                </div>
            </div>

            <div id="algorithmTab">

                <div class="menuFirst">
                    wybierz algorytm:<br/>
                    <select id='algType'>
                        <option value="bfs">Breadth-first search</option>
                        <option value="dfs">Depth-first search</option>
                        <option value="flow">Ford–Fulkerson</option>
                        <option value="user">algorytm użytkownika</option>
                    </select><br/>
                    <button id='prepare' style="width:100px">przygotuj</button><br/>
                    <br/>
                    <br/>
                    <button id="play" class="player" disabled="disabled">odtwarzaj</button>
                    <button id="pause" class="player" disabled="disabled">zatrzymaj</button><br/>
                    <button id="nextStep" class="player" disabled="disabled">następny krok</button>
                    <button id="stop" class="player" disabled="disabled">anuluj</button>
                </div>

                <div class="menuSecond">
                    tempo animacji:<br/>
                    <input id="tempo" type="range" name="tempo" min="1" max="10"><br/>
                    wierzchołek startowy:<br />
                    <input id="startId" type="text" value="1"/><br/>
                    wierzchołek końcowy:<br />
                    <input id="finishId" type="text" value="4"/><br/>
                </div>

            </div>

            <div id="algorithmMakerTab">

                <div class="menuFirst">
                    pseudokod:
                    <div id="code"></div>
                </div>
                <div class="menuSecond">
                    <select id='instrType'>
                        <option value="an">animacja wierzchołka</option>
                        <option value="ae">animacja krawędzi</option>
                    </select>
                    <button id="addInstr">dodaj instrukcję</button><br/>
                    <br/>
                    <button id="codeClearer">wyczyść pseudokod</button><br/>
                    <!--<button id="saveAlg">zapisz algorytm</button><br/>-->
                </div>

            </div>
        </div>

        <div id='display'>
            <div id="left">
                <div id="output">
                    <div id="instructions"></div>
                    <div id="logs"></div>
                </div>
            </div>

            <div id="right">
                <button id="redrawer">rozstaw graf</button>
                <button id="resizer">zmień wymiary obszaru</button>
                <div id="canvas"></div>
            </div>
        </div>

        <div id="footer" style="clear:both; height:100px">

        </div>
    </body>
</html>